---
title: Toast
package: "@chakra-ui/toast"
image: "components/toast.svg"
description: The toast is used to show alerts on top of an overlay
---

The toast is used to show alerts on top of an overlay. The toast will close
itself when the close button is clicked, or after a timeout — the default is 5
seconds. The toast component is used to give feedback to users after an action
has taken place.

<ComponentLinks
  github={{ package: "toast" }}
  npm={{ package: "@chakra-ui/toast" }}
/>

<carbon-ad></carbon-ad>

Toasts can be configured to appear at either the top or the bottom of an
application window, and it is possible to have more than one toast onscreen at a
time.

## Import

```js
import { useToast } from "@chakra-ui/react"
```

## Usage

```jsx
function ToastExample() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast({
          title: "Account created.",
          description: "We've created your account for you.",
          status: "success",
          duration: 9000,
          isClosable: true,
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

> Make sure to call `useToast` at least one component level below the
> `<ChakraProvider>` because it needs access to the current theme.

## Custom component

Display a custom component instead of the default Toast UI.

```jsx
function CustomToastExample() {
  const toast = useToast()
  return (
    <Button
      onClick={() =>
        toast({
          position: "bottom-left",
          render: () => (
            <Box color="white" p={3} bg="blue.500">
              Hello World
            </Box>
          ),
        })
      }
    >
      Show Toast
    </Button>
  )
}
```

## Closing Toasts

Toasts can be closed imperatively, individually (via the `close` instance
method) or all together (via the `closeAll` instance method).

```jsx
function ClosingToastExample() {
  const toast = useToast()
  const toastIdRef = React.useRef()

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current)
    }
  }

  function closeAll() {
    // you may optionally pass an object of positions to exclusively close
    // keeping other positions opened
    // e.g. `{ positions: ['bottom'] }`
    toast.closeAll()
  }

  function addToast() {
    toastIdRef.current = toast({ description: "some text" })
  }

  return (
    <Stack isInline spacing={2}>
      <Button onClick={addToast} type="button">
        Toast
      </Button>

      <Button onClick={close} type="button" variant="outline">
        Close last toast
      </Button>

      <Button onClick={closeAll} type="button" variant="outline">
        Close all toasts
      </Button>
    </Stack>
  )
}
```

## Status

You can use `status` to change the color of your toasts.

```jsx
function ToastStatusExample() {
  const toast = useToast()
  const statuses = ["success", "error", "warning", "info"]

  return (
    <Wrap>
      {statuses.map((status, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${status} toast`,
                status: status,
                isClosable: true,
              })
            }
          >
            Show {status} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}
```

## Variants

`Toast` uses the same variants as the
[`Alert`](https://chakra-ui.com/docs/feedback/alert) component.

```jsx
function ToastVariantsExample() {
  const toast = useToast()
  const variants = ["solid", "subtle", "left-accent", "top-accent"]

  return (
    <Wrap>
      {variants.map((variant, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${variant} toast`,
                variant: variant,
                isClosable: true,
              })
            }
          >
            Show {variant} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}
```

## Changing the toast position

Using the `position` prop you can adjust where your toast will be popup from.

```jsx
function PositionExample() {
  const toast = useToast()
  const positions = [
    "top",
    "top-right",
    "top-left",
    "bottom",
    "bottom-right",
    "bottom-left",
  ]

  return (
    <Wrap>
      {positions.map((position, i) => (
        <WrapItem key={i}>
          <Button
            onClick={() =>
              toast({
                title: `${position} toast`,
                position: position,
                isClosable: true,
              })
            }
          >
            Show {position} toast
          </Button>
        </WrapItem>
      ))}
    </Wrap>
  )
}
```

## Preventing Duplicate Toast

In some cases you might need to prevent duplicate of specific toasts. To achieve
you need to pass an `id` and use the `toast.isActive` method to determine when
to call `toast(...)`.

```jsx live=false
function PreventDuplicateExample() {
  const toast = useToast()
  const id = "test-toast"
  return (
    <Button
      onClick={() => {
        if (!toast.isActive(id)) {
          toast({
            id,
            title: "Hey! You can create a duplicate toast",
          })
        }
      }}
    >
      Click me!
    </Button>
  )
}
```

## Standalone Toasts

Use `createStandaloneToast` to create toasts from outside of your React
Components.

```js
import { createStandaloneToast } from "@chakra-ui/react"

const toast = createStandaloneToast()
// const customToast = createStandaloneToast({ theme: yourCustomTheme })

toast({
  title: "An error occurred.",
  description: "Unable to create user account.",
  status: "error",
  duration: 9000,
  isClosable: true,
})
```

## Props

<PropsTable of="useToast" />
